<template>
  <div class="main">
    <center>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 80%;margin-top:20px"
        border
        height="600"
      >
        <el-table-column label="序号"  align="center">
          <template slot-scope="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column label="车牌号" prop="car_number"> </el-table-column>
        <el-table-column label="区域" prop="area_name"> </el-table-column>
        </el-table-column>
        <el-table-column label="身份证" prop="idcard"> </el-table-column>
        <el-table-column label="颜色" prop="color"> </el-table-column>
        <el-table-column label="种类" prop="type"> </el-table-column>
        <el-table-column label="注册时间" prop="starttime"> </el-table-column>
       
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.totalRow"
      >
      </el-pagination>
    </center>
  </div>
</template>

<script>
import { getJiangshiche } from "@/api/moxing";
export default {
  data() {
    return {
      tableData: [],
      search: "",
      pageNumber: 1, //当前页
      pageSize: 10, //每页大小
      totalRow: 0, //总条数
      totalPage: 0, //总页数
      input: "",
      loading: true,
    };
  },
  methods: {
    //分页点击方法
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.findAll(params);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNumber = val;
      var params = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      };
      this.findAll(params);
    },
    findAll(params) {
      getJiangshiche("/moxing/getJiangshiCar", params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.totalRow = res.data.totalRow;
          // console.log(this.tableData.length)
          this.loading = false;
        } else if (res.code === 500) {
          this.$message(res.data);
        }
      });
    },
    //添加表格序号
    getIndex($index) {
      return (this.pageNumber - 1) * this.pageSize + $index + 1;
    }
  },
  //初始化的时候初始化表格大小
  created() {
    var params = {
      pageNumber: this.pageNumber,
      pageSize: this.pageSize
    };
    this.findAll(params);
  }
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 690px;
  border: 1px solid red;
}
</style>
